<template>
    <div class="bottom">
        <el-card shadow="hover">
            <div slot="header">
                <p>关键词搜索</p>
            </div>
            <div>
                <section class="search">
                    <div>
                        <p>搜索用户数</p>
                        <p class="emphAsize">{{ userSum }}</p>
                        <v-charts :options="totalUser"></v-charts>
                    </div>
                    <div>
                        <p>搜索量</p>
                        <p class="emphAsize">{{ countSum }}</p>
                        <v-charts :options="totalCount"></v-charts>
                    </div>
                </section>
                <el-table :data="showData" style="width: 100%">
                    <el-table-column prop="no" label="排序">
                    </el-table-column>
                    <el-table-column prop="word" label="关键词">
                    </el-table-column>
                    <el-table-column prop="user" label="用户搜索量">
                    </el-table-column>
                    <el-table-column prop="count" label="总的搜索量">
                    </el-table-column>
                    <el-table-column prop="hit" label="点击率">
                        <template slot-scope="scope">
                            {{ scope.row.hit + '%' }}
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background layout="prev, pager, next" :page-size="query.pageSize"
                    :page-count="query.pageNum" @current-change="changePage" :total="wordList.length">
                </el-pagination>
            </div>
        </el-card>
        <el-card shadow="hover">
            <div slot="header" class="cateSort">
                <p>分类排行</p>
                <!-- 按钮组 -->
                <el-radio-group v-model="changeType" size="mini" @input="pieChart">
                    <el-radio-button label="品类"></el-radio-button>
                    <el-radio-button label="商品"></el-radio-button>
                </el-radio-group>
            </div>
            <v-charts :options="options"></v-charts>
        </el-card>
    </div>
</template>

<script>
import searchData from '@/mixin/searchData'
import reportData from '@/mixin/reportData';
export default {
    mixins: [searchData, reportData],
    data() {
        return {
            changeType: '品类',
            query: {
                pageNum: 1,
                pageSize: 4,
            },
            /* 搜索用户数 */
            userSum: 0,
            /* 总搜索量 */
            countSum: 0,
            options: {},
        }
    },
    mounted() {

    },
    methods: {
        changePage(num) {
            // console.log(num);
            this.query.pageNum = num;
        },
        /* 饼图数据 */
        pieChart() {
            var data = []
            console.log(this.cateGory)
            //根据品类和商品来判断数据源
            if (this.changeType == '品类') {
                var { axisX, data1 } = this.cateGory.data1
            } else if (this.changeType == '商品') {
                var { axisX, data1 } = this.cateGory.data2
            }
            // console.log(axisX, data1);
            let total = data1.reduce((sum, i) => {
                return sum + i
            }, 0)
            // console.log(total);
            axisX.forEach((item, key) => {
                let obj = {}
                obj.legendname = item
                obj.value = data1[key]
                obj.persent = (data1[key] / total).toFixed(2) * 100 + '%'
                obj.name = item + '|' + obj.persent
                data.push(obj)
            })
            // console.log(data)
            this.options = {
                title: [
                    {
                        text: this.changeType + '分布',
                        left: '20%',
                    },
                    {
                        text: this.changeType == '品类' ? '累计订单量' : '商品订单量',
                        left: '30%',
                        top: '46%',
                    }
                ],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 0,
                    bottom: 0,
                    left: '80%',
                    // formatter:(name)=>{
                    //     let index = data.findIndex(item=>{
                    //         return item.name = name
                    //     })
                    //     return data[index].legendname
                    // }
                },
                series: [
                    {
                        name: '品类分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['38%', '50%'],
                        data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 4,
                        },
                        label: {
                            color:'auto'
                        },
                    }
                ]
            };
        }
    },
    computed: {
        /* 搜索用户数 */
        totalUser() {
            this.wordList.forEach(item => {
                this.userSum += item.user
                this.countSum += item.count
            })
            // console.log(this.userSum);
            // console.log(this.countSum);
            // console.log(this.wordList)
            var data = []
            this.wordList.forEach(item => {
                data.push(item.count)
            })
            return {
                grid: {
                    left: 0,
                    right: 0,
                    bottom: '3%',
                    top: '4%',
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                },
                yAxis: {
                    show: false,
                },
                series: [
                    {
                        name: 'Line 1',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: 'green',
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data
                    },
                ],
            }
        },
        /* 总的搜索量 */
        totalCount() {
            var data = []
            this.wordList.forEach(item => {
                data.push(item.user)
            })
            return {
                grid: {
                    left: 0,
                    right: 0,
                    bottom: '3%',
                    top: '4%',
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false,
                },
                yAxis: {
                    show: false,
                },
                series: [
                    {
                        name: 'Line 1',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: 'green',
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data
                    },
                ],
            }
        },
        //每页显示的记录数据
        showData() {
            //开始截取的位置 = (当前页码-1) * 每页显示记录数
            // slice(开始位置，结束位置)
            let start = (this.query.pageNum - 1) * this.query.pageSize
            let end = start + this.query.pageSize
            return this.wordList.slice(start, end)
        },
    },
    watch: {
        cateGory: {
            handler(val) {
                this.pieChart()
            },
            deep: true,
        }
    }
}
</script>

<style lang="scss" scoped>
.bottom {
    height: 500px;
    // background-color: red;
    display: flex;
    margin-top: 20px;
    justify-content: space-between;

    .el-card {
        width: 49%;
        height: 100%;

        .el-card__header {
            // padding: 20px;
            height: 30px;
            font-size: 14px;
            color: #bbb;
        }
    }

    .cateSort {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .search {
        display: flex;
        justify-content: space-between;

        &>div {
            width: 48%;
            height: 120px;
            // background-color: red;
            display: flex;
            flex-direction: column;

            &>p:nth-child(1) {
                font-size: 12px;
                color: #ccc;
                // background-color: green;
            }

            .echarts {
                flex: 1;
                width: 100%;
            }
        }
    }
}
</style>